<template>
	<view>
		<view class="lineHighTen"></view>
		<view class="cart_user">
			<view>
				<view class="flex justify-end padding" v-if="cartList !=''">
					<view class="cart_store_right_text" v-if="edit" @click="editlist(false)">编辑</view>
					<view class="cart_store_right_text" v-if="!edit" @click="editlist(true)">完成</view>
				</view>
				<view class="" v-for="(item,index) in cartList" :key="index">
					<view class="cart_goods">
						<view class="cart_goods_select" @click="messageMen(index,item)">
							<image :src="item.message?'../../static/cart/checked.png':'../../static/cart/checkno.png'" class="home_top_select_message_image"
							 style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="cart_goods_image">
							<image class="cart_goods_images bg-gray radius" :src="image+item.img"></image>
						</view>
						<view class="cart_goods_content">
							<view class="cart_goods_content_up">
								<text class="cart_goods_content_title">{{item.title}}</text>
								<text class="cart_goods_content_sepc">规格：{{item.spec}}</text>
							</view>

							<view class="cart_goods_content_money">
								<text class="cart_goods_sell_money">￥{{item.price}}</text>
								<view class="uni-numbox">
									<view class="uni-numbox__minus" @click="addCount2(item,1)">-</view>
									<input class="uni-numbox__value" v-model="item.num">
									<!-- <view class="uni-numbox__plus" @click="addCount(item,index)">+</view> -->
									<view class="uni-numbox__plus" @click="addCount2(item,2)">+</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>





			<!-- 分割线
			<view class="lineHighOne"></view>
			<!-- 底部操作菜单 -->
			<view class="cart_bottom">
				<view class="cart_bottom_left">
					<view class="cart_bottom_left_image" @click="allchecked">
						<image :src="totalinfo?'../../static/cart/checked.png':'../../static/cart/checkno.png'" class="home_top_select_message_image"
						 style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="cart_bottom_left_text">全选</view>
					<view class="cart_bottom_left_price">总计:￥{{total}}</view>
				</view>
				<view :class="true?'cart_bottom_right':'cart_bottom_rights'" v-if="edit" @click="toOrder">结算</view>
				<view :class="true?'cart_bottom_right':'cart_bottom_rights'" v-if="!edit" @click="deleteMen()">删除</view>
			</view>
		</view>
		<view v-if="cartList =='' " class="text-gray text-center padding">
			暂无更多内容

		</view>
	</view>
</template>

<script>
	
	const app = getApp().globalData
	import {
		getMyChatList,
		checkCartGoods,
		editCartGoodsNum,
		delCartGoods
	} from '../../common/path.js'
	export default {
		data() {
			return {
				cartList: [],

				totalinfo: false,
				edit: true, //编辑
				total: 0,
				number: 1, //商品当前选择数量
				num: 0, //记录被选中个数
				button: false,
				ShoppingList: [],
				commid: '',
				cartList: [],
				image:''
			}
		},
		
		onShow() {
			this.image = app.image
			this.totalinfo =false
			this.total = 0
			this.getMyChatList()
		},
		methods: {
			//修改购物车数量接口
			addCount2(item, event) {
				let data = {}
				if (event == 1) {
					data = {
						id: app.userInfo.id,
						cartId: item.id,
						num: item.num - 1
					}
				} else {
					data = {
						id: app.userInfo.id,
						cartId: item.id,
						num: item.num + 1
					}
				}
				this.$axios.axios('POST', editCartGoodsNum, data)
					.then(res => {
						console.log(res)
						if (res.status == 1) {
							this.getMyChatList()
							this.$tools.showToast(res.msg)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
					.catch(err => {
						this.$tools.showToast('网络异常', err)
						console.log(err)
					})
			},
			//删除接口
			deleteMen() {
				let cartlisArr = this.cartList
				cartlisArr.forEach(zifan => {
					if (zifan.message == true) {
						this.delCartGoods(zifan.id)
						console.log('zifan===>',zifan)
					}
				})
			},
			//删除购物车
			delCartGoods(id) {
				let data = {
					id: app.userInfo.id,
					cartId: id
				}
				this.$axios.axios('POST', delCartGoods, data)
					.then(res => {
						console.log(res)
						if (res.status == 1) {
							this.getMyChatList()
							this.$tools.showToast('删除成功')
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			//获取购物车列表接口
			getMyChatList() {
				let data = {
					id: app.userInfo.id
				}
				this.$axios.axios('POST', getMyChatList, data)
					.then(res => {
						if (res.status == 1) {
							this.cartList = res.data
							this.cartList.forEach(item => {
								item.message = false
							})
						} else {
							this.$tools.showToast('异常')
						}
					})
					.catch(err => {
						console.log(err)
					})

			},
			//全选
			allchecked() {
				this.total = 0
				if (this.totalinfo == false) {
					this.totalinfo = true
					this.button = true
					for (let i = 0; i < this.cartList.length; i++) {
						this.cartList[i].message = 1;
						this.total = this.total + this.cartList[i].price * this.cartList[i].num;
					}
				} else {
					this.button = false
					this.totalinfo = false
					this.total = 0
					for (let i = 0; i < this.cartList.length; i++) {
						this.cartList[i].message = 0;
					}
				}

			},



			//减
			redQuantity(item) {
				let arrList = this.cartList; //获取的所搜订单
				let moneyTotal = 0; //选中的总价
				if (item.num > 1) {
					item.num--
					this.total = item.price * item.num
					arrList.forEach(oneone => {
						if (oneone.message) {
							moneyTotal += oneone.price * oneone.num
						}
					})
					this.total = moneyTotal

				} else {
					this.$tools.showToast("最少选择一件商品")
				}
			},
			//加addCount
			addCount(item, index) {
				let arrList = this.cartList; //获取的所搜订单
				let moneyTotal = 0; //选中的总价
				if (item.message) {
					item.num++
				}
				arrList.forEach(oneone => {
					if (oneone.message) {
						moneyTotal += oneone.price * oneone.num
					}
				})
				this.total = moneyTotal
			},
			//单选
			messageMen(event, item) {

				this.cartList[event].message = !this.cartList[event].message
				let moneyTotal = 0
				if (this.cartList[event].message) {
					this.button = true
				} else {
					this.button = false
				}
				let arrList = this.cartList
				arrList.forEach(res => {
					if (res.message) {
						moneyTotal += res.price * res.num
					}
				})
				this.total = moneyTotal
				let isShow = false; //判断是否全选
				for (let i = 0; i < arrList.length; i++) {
					if (arrList[i].message) {
						isShow = true; //赋值 true  或者 false
					} else {
						isShow = false; //   false
						break;
					}
				}
				this.totalinfo = isShow
			},




			//获取购物车列表
			getColonelShoppingDO() {
				let data = {
					shoppingColonelId: this.memid,
					shoppingOpenId: this.userid
				}
				this.$axios.axios('POST', getColonelShoppingDO, data)
					.then((res) => {
						this.ShoppingList = res.colonelShoppingList
						console.log("购物车列表==========>", res)
					})
					.catch((err) => {
						this.$tools.showToast(res.msg)
					})
			},

			editlist(res) {
				this.edit = res
				this.button = true
			},

			//跳转订单详情页面
			toOrder() {
				if (this.total == 0) {
					this.$tools.showToast('请先选择需要下单的商品！')
				} else {
					let objTotal = this.cartList
					let arrTotal = []
					objTotal.forEach(zifan => {
						if (zifan.message == true) {
							arrTotal.push(zifan); //汇入总数据
						}
					})


					uni.navigateTo({
						url: 'addOrder?detail=' + JSON.stringify(arrTotal) + '&orderInfo=' + false + '&total=' + this.total
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.cart_user {
		/* width: 100%; */
		background-color: #FFFFFF;
	}

	.cart_store {
		height: 100upx;
		display: flex;
		justify-content: space-between;
		margin: 0 30upx;
	}

	.cart_store_left {
		height: 100%;
		display: flex;
		align-content: center;
		align-items: center;
	}

	.cart_store_left_image {
		width: 35upx;
		height: 35upx;
	}

	.cart_store_left_text {
		font-size: 30upx;
		margin-left: 30upx;
	}

	.cart_store_right_text {
		font-size: 30upx;
		height: 100%;
		display: flex;
		align-items: center;
	}

	/* 购物车商品 */
	.cart_goods {
		height: 250upx;
		display: flex;
		justify-content: flex-start;
	}

	.cart_goods_select {
		width: 35upx;
		height: 35upx;
		margin-left: 30upx;
		margin-top: 100upx;
	}

	.cart_goods_selects {
		width: 35upx;
		height: 35upx;
	}

	.cart_goods_image {
		width: 198upx;
		height: 198upx;
		margin-left: 30upx;
		margin-top: 25upx;
	}

	.cart_goods_images {
		width: 198upx;
		height: 198upx;
	}

	.cart_goods_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 20upx 30upx 25upx 30upx;
	}

	.cart_goods_content_up {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.cart_goods_content_title {
		font-size: 30upx;
		/* overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; */
	}

	.cart_goods_content_sepc {
		font-size: 25upx;
		color: #BABABA;
	}

	.cart_goods_content_money {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.cart_goods_sell_money {
		font-size: 30upx;
		color: #E70422;
	}

	/* 底部操作菜单 */
	.cart_bottom {
		position: fixed;
		bottom: 0;
		height: 100upx;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		border-top: #DBDBDB solid 1upx;
	}

	.cart_bottom_left {
		display: flex;
		flex-direction: row;
	}

	.cart_bottom_left_image {
		margin-left: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cart_bottom_left_images {
		width: 35upx;
		height: 35upx;
	}

	.cart_bottom_left_text {
		font-size: 30upx;
		margin-left: 20upx;
		display: flex;
		align-items: center;
	}

	.cart_bottom_left_price {
		font-size: 30upx;
		color: #E70422;
		margin-left: 30upx;
		display: flex;
		align-items: center;
	}

	.cart_bottom_right {
		width: 30%;
		font-size: 30upx;
		background-color: #E70422;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cart_bottom_rights {
		width: 30%;
		font-size: 30upx;
		background-color: #BABABA;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-numbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		height: 70upx;
		position: relative
	}

	.uni-numbox:after {
		content: '';
		position: absolute;
		transform-origin: center;
		box-sizing: border-box;
		pointer-events: none;
		top: -50%;
		left: -50%;
		right: -50%;
		bottom: -50%;
		border: 1px solid #c8c7cc;
		border-radius: 12upx;
		transform: scale(.5)
	}

	.uni-numbox__minus,
	.uni-numbox__plus {
		margin: 0;
		background-color: #f8f8f8;
		width: 70upx;
		font-size: 40upx;
		height: 100%;
		line-height: 70upx;
		text-align: center;
		color: #333;
		position: relative
	}

	.uni-numbox__value {
		position: relative;
		background-color: #fff;
		width: 80upx;
		height: 100%;
		text-align: center;
		padding: 0
	}

	.uni-numbox__value:after {
		content: '';
		position: absolute;
		transform-origin: center;
		box-sizing: border-box;
		pointer-events: none;
		top: -50%;
		left: -50%;
		right: -50%;
		bottom: -50%;
		border-style: solid;
		border-color: #c8c7cc;
		border-left-width: 1px;
		border-right-width: 1px;
		border-top-width: 0;
		border-bottom-width: 0;
		transform: scale(.5)
	}

	.uni-numbox--disabled {
		color: silver
	}
</style>
